<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Vue2 CDN 链接 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./skin/css/products.css">
  <title>Industrial Equipment Site</title>
</head>

<body>
  <div id="app">
    <!-- banner区域 -->
    <div class="banner">PRODUCTION EQUIPMENT</div>
    <!-- 内容容器 -->
    <div class="container">
      <div class="section-title">Classify into the following categories according to product use / industry</div>
      <div class="category-row">
        <div class="category-item" v-for="(item, index) in categoryList" :key="index">
          <i :class="item.icon"></i>
          <p>{{ item.text }}</p>
        </div>
      </div>

      <div class="section-title">POPULAR PRODUCTS</div>
      <div class="product-tabs">
        <div class="product-tab" :class="{ active: activeTab === index }" v-for="(tab, index) in productTabs"
             :key="index" @click="activeTab = index">{{ tab }}</div>
      </div>
    <div class="product-row">
        <div class="product-item" v-for="(product, index) in filteredProducts" :key="index">
          <img :src="product.img" alt="product">
          <p>{{ product.name }}</p>
          <span>{{ product.price }}</span>
        </div>
    </div>
    </div>

    <!-- 底部区域 -->
    <footer>
      <div class="footer-container">
        <div class="footer-section">
          <h3>LOGO</h3>
          <p>Production Equipment</p>
          <p>Industrial Components</p>
          <p>Tools and Consumables</p>
          <p>Industry Solutions</p>
          <p>Enterprise Services</p>
        </div>
        <div class="footer-section">
          <h3>CONTACT US</h3>
          <p>Address: Yongqing Science and Technology Parks, Binhai New Area, Tianjin</p>
          <p>Telephone: 022-58916522-88753566</p>
          <p>Email: liuxianggang@13.com</p>
        </div>
        <div class="footer-section">
          <img src="https://via.placeholder.com/100" alt="qr-code" class="qr-code">
        </div>
      </div>
    </footer>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          categoryList: [
            { icon: 'iconfont icon-production-equipment', text: 'Production Equipment' },
            { icon: 'iconfont icon-industrial-components', text: 'Industrial Components' },
            { icon: 'iconfont icon-tools-consumables', text: 'Tools and Consumables' },
            { icon: 'iconfont icon-industry-solutions', text: 'Industry Solutions' },
            { icon: 'iconfont icon-enterprise-services', text: 'Enterprise Services' }
          ],
          productTabs: ['First product', 'Second product', 'Third product', 'Four product', 'Five product'],
          activeTab: 0,
          productList: [
            { img: 'https://via.placeholder.com/150', name: 'Cordless Drill Set', price: '$150.00', tab: 0 },
            { img: 'https://via.placeholder.com/150', name: 'Industrial Barcode Reader', price: '$500.00', tab: 0 },
            { img: 'https://via.placeholder.com/150', name: 'Industrial Tablet', price: '$800.00', tab: 0 },
            { img: 'https://via.placeholder.com/150', name: 'Hydraulic Pump Cylinder Block Assembly', price: '$450.00', tab: 0 },
            { img: 'https://via.placeholder.com/150', name: 'Another Product', price: '$300.00', tab: 1 },
            // 可继续补充不同tab下的产品数据...
          ]
        }
      },
      computed: {
        filteredProducts() {
          return this.productList.filter(product => product.tab === this.activeTab);
        }
      }
    });
  </script>
</body>

</html>